<script lang="ts" setup>
import { ref } from 'vue';
import DemoComponent from '@/components/demo/demo.vue';
import SlotComponent from '@/components/demo/slot.vue';

const baseState = [
  {
    title: 'Learn TypeScript',
    done: true
  },
  {
    title: 'Try Immer',
    done: false
  }
];
const nextState = baseState.slice(); // 浅拷贝数组
nextState[1] = {
  // 替换第一层元素
  ...nextState[1], // 浅拷贝第一层元素
  done: true // 期望的更新
};
nextState.push({ title: 'Tweet about it', done: false });
const test = () => {
  nextState[2].done = true;
  console.log(baseState);
  console.log(nextState);
};

const permission = ref('code01');
interface Binding {
  value: string;
  dir: {
    initNode: (arg0: HTMLElement, arg1: any) => void;
    parentNode:
      | ParentNode
      | { removeChild: (arg0: HTMLElement) => void; appendChild: (arg0: HTMLElement) => void }
      | null;
  };
}
const vPermission = {
  parentNode: null,
  initNode(el: HTMLElement, binding: Binding) {
    // 权限code列表
    binding.dir.parentNode!.appendChild(el);
    const permissions = ['code01', 'code02', 'code03'];
    if (!permissions.includes(binding.value)) {
      binding.dir.parentNode!.removeChild(el);
    }
  },
  mounted(el: HTMLElement, binding: Binding) {
    binding.dir.parentNode = el.parentNode;
    binding.dir.initNode(el, binding);
  },
  updated(el: HTMLElement, binding: Binding) {
    binding.dir.initNode(el, binding);
  }
};
const testChange = (data: string) => {
  console.log(data);
};

// v-for
const items = [1, 2, 3, 4, 5, 6];
const objects = { a: 1, b: 2, c: 3, d: 4 };

// v-on
const testKeyDown = () => {
  console.log('12312');
};

// v-bind
const key = 'myId';
const testBindClick = (event: Event) => {
  console.log(event);
};

// v-model
const value = ref(0);
</script>

<template>
  <div class="test-container">
    <div>
      <button @click="test()">测试</button>
    </div>
    <br />
    <div>
      <button v-permission="permission" @click="permission = 'code05'">测试自定义指令</button>
    </div>
    <br />
    <button @click="permission = 'code01'">变更指令参数</button>
    <br />
    <br />
    <DemoComponent :value="'12312'" @change="testChange" />
    <div v-for="(value, key, index) in items">{{ value }} {{ key }} {{ index }}</div>
    <br />
    <div v-for="(value, key, index) in objects">{{ value }} {{ key }} {{ index }}</div>
    <br />
    <input type="text" v-model.lazy="value" @keydown.ctrl="testKeyDown" />
    {{ value }}
    <br />
    <div :title="`123${key}`" @click="testBindClick">动态attribute名</div>
    <br />
    <SlotComponent>
      <template #header="{ value }">
        <button>{{ value }}</button>
        <button v-once>{{ value }}</button>
      </template>
      <template #default="{ data }">
        <button>{{ data }}</button>
      </template>
    </SlotComponent>
    <router-link to="/vue/transition">子路由</router-link>
  </div>
</template>

<style lang="scss" scoped>
.test-container {
  padding: 8px;
}
</style>
